<template>
  <div class="excel-uploader dark-theme">
    <div class="upload-container">
      <el-upload
        class="upload-demo"
        drag
        :show-file-list="false"
        :before-upload="beforeUpload"
        accept=".xlsx,.xls"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖拽Excel文件到此处或<em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            请上传符合格式的多语言Excel文件
            <div class="format-instructions">
              <h3>功能概述</h3>
              <p>本工具用于将 Excel 文件转换为多个 JSON 文件，特别适合多语言资源配置转换：</p>
              <ul>
                <li>自动识别 Excel 表格结构</li>
                <li>支持自定义输出文件名</li>
                <li>一键式转换操作</li>
                <li>清晰的进度提示</li>
              </ul>
              
              <h3>格式要求</h3>
              <ul>
                <li><strong>第一行</strong>：说明标题，不会读取</li>
                <li><strong>第二行</strong>：生成的文件名，这里有几列就会生成几个json</li>
                <li><strong>第一列</strong>：key值</li>
              </ul>
            </div>
          </div>
        </template>
      </el-upload>
    </div>

    <el-dialog v-model="dialogVisible" title="转换结果" width="30%" class="dark-dialog">
      <p>成功生成 {{ result.fileCount }} 个JSON文件：</p>
      <ul class="file-list">
        <li v-for="file in result.fileList" :key="file">{{ file }}</li>
      </ul>
      <template #footer>
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
        <el-button type="success" @click="downloadAsZip">下载ZIP包</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { UploadFilled } from '@element-plus/icons-vue';
import * as XLSX from 'xlsx';
import JSZip from 'jszip';
import { saveAs } from 'file-saver';

const dialogVisible = ref(false);
const result = ref({
  fileCount: 0,
  fileList: [],
  jsonData: {}
});

const beforeUpload = (file) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    try {
      const data = new Uint8Array(e.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      
      // 调用处理函数
      const processResult = processExcel(workbook);
      
      result.value = processResult;
      dialogVisible.value = true;
    } catch (error) {
      ElMessage.error(`转换失败: ${error.message}`);
    }
  };
  reader.readAsArrayBuffer(file);
  return false; // 阻止自动上传
};

const processExcel = (workbook) => {
  const sheetName = workbook.SheetNames[0];
  const rows = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], { 
    header: 1, 
    range: 1 
  });

  // 数据校验
  if (rows.length < 2) {
    throw new Error('需要至少2行数据（第2行定义文件名，第3行开始数据）');
  }

  // 处理文件名行（第2行）
  const filenameRow = rows[0];
  const jsonFilenames = filenameRow.slice(1).map(name => `${name}.json`);

  // 初始化JSON字典
  const jsonDicts = {};
  jsonFilenames.forEach(filename => {
    jsonDicts[filename] = {};
  });

  // 处理数据行（从第3行开始）
  const contentRows = rows.slice(1); 
  contentRows.forEach(row => {
    const key = row[0]; // 第一列作为key
    if (!key || key === 'empty') return;

    jsonFilenames.forEach((filename, i) => {
      const value = row[i + 1] || ''; // 数据从第2列开始
      jsonDicts[filename][key] = value;
    });
  });

  return {
    fileCount: jsonFilenames.length,
    fileList: jsonFilenames,
    jsonData: jsonDicts
  };
};

const downloadAsZip = async () => {
  try {
    const zip = new JSZip();
    const folder = zip.folder("i18n-files");
    
    // 添加所有JSON文件到ZIP
    Object.entries(result.value.jsonData).forEach(([filename, data]) => {
      folder.file(filename, JSON.stringify(data, null, 2));
    });

    // 生成ZIP文件并下载
    const content = await zip.generateAsync({ type: "blob" });
    saveAs(content, "i18n-files.zip");
    
    dialogVisible.value = false;
    ElMessage.success('ZIP包下载成功');
  } catch (error) {
    ElMessage.error(`生成ZIP包失败: ${error.message}`);
  }
};
</script>

<style scoped>
.dark-theme {
  --bg-color: #1a1a1a;
  --card-bg: #2d2d2d;
  --text-color: #e0e0e0;
  --text-secondary: #a0a0a0;
  --border-color: #444;
  --primary-color: #409eff;
  --hover-color: #4a4a4a;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --instruction-bg: #252525;
}

.excel-uploader {
  /* margin: 20px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg-color);
  color: var(--text-color);
  min-height: 100vh;
}

.upload-container {
  width: 100%;
  max-width: 600px;
  margin: 40px auto;
}

.upload-demo {
  padding: 20px;
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: 0 4px 20px var(--shadow-color);
}

.el-upload-dragger {
  padding: 40px 20px;
  border: 2px dashed var(--border-color);
  border-radius: 6px;
  transition: all 0.3s;
  background-color: transparent;
}

.el-upload-dragger:hover {
  border-color: var(--primary-color);
  background-color: rgba(64, 158, 255, 0.05);
}

.el-icon--upload {
  font-size: 67px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.el-upload__text {
  font-size: 16px;
  color: var(--text-color);
  em {
    color: var(--primary-color);
    font-style: normal;
  }
}

.el-upload__tip {
  margin-top: 20px;
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
}

.format-instructions {
  margin-top: 20px;
  padding: 15px;
  background: var(--instruction-bg);
  border-radius: 6px;
  text-align: left;
  border: 1px solid var(--border-color);
  h3 {
    color: var(--text-color);
    margin: 10px 0;
    font-size: 16px;
  }
  p, ul {
    margin: 8px 0;
    color: var(--text-secondary);
  }
  li {
    margin-left: 20px;
    line-height: 1.6;
  }
}

.file-list {
  max-height: 300px;
  overflow-y: auto;
  margin: 15px 0;
  li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    &:last-child {
      border-bottom: none;
    }
  }
}

/* 暗色对话框样式 */
:deep(.dark-dialog) {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  
  .el-dialog__header {
    border-bottom: 1px solid var(--border-color);
    .el-dialog__title {
      color: var(--text-color);
    }
  }
  
  .el-dialog__body {
    color: var(--text-color);
  }
  
  .el-dialog__footer {
    border-top: 1px solid var(--border-color);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .upload-container {
    width: 90%;
  }
  
  .el-dialog {
    width: 90% !important;
  }
}
</style>